import React from 'react'
import {NavLink} from "react-router-dom";
import {Button, Flex, WingBlank,Icon} from "antd-mobile";
import '../index.css';

// 高亮的样式，表示我们在哪个导航下
const selectedStyle = {
    borderBottom:'2px solid red',
    fontSize:'18px',
    textAlign:'center',
    padding: '5px 2px',
    color:'blue'
}
export class Main extends React.Component {
    constructor(props){
        super(props)
        this.state={

        }
        // this.changes=this.changes.bind(this)
    }
    changes(){
        // this.setState({count:Store.getState().count})
    }
    componentDidMount() {
    }

    render() {
        return(
            <div style={{width:'100vw'}}>
                {/*头部*/}
                <Flex justify='between' className='top'>
                    <WingBlank size='md'/>
                    <div className='head_icon'>
                        <span></span>
                        <span>消息</span>
                    </div>

                    <Flex.Item>
                        <WingBlank>
                            <Button className='btn'><Icon type="search" size='xxs' />欧莱雅</Button>
                        </WingBlank>
                    </Flex.Item>

                    <div className='head_icon'>
                        <span></span>
                        <span>分类</span>
                    </div>
                    <WingBlank size='md'/>
                </Flex>
                {/*导航*/}
                    <ul className='nav-list'>
                        <li>
                            <NavLink to='/specialSale' activeStyle ={selectedStyle}>今日特卖</NavLink>
                        </li>
                        <li>
                            <NavLink to='/beautyMakeup' activeStyle ={selectedStyle}>美妆个护</NavLink>
                        </li>
                        <li>
                            <NavLink to='/homeLife' activeStyle ={selectedStyle}>家居生活</NavLink>
                        </li>
                        <li>
                            <NavLink to='/healthCare' activeStyle ={selectedStyle}>健康保健</NavLink>
                        </li>
                        <li>
                            <NavLink to='/shuNin' activeStyle ={selectedStyle}>舒宁易购</NavLink>
                        </li>
                    </ul>
            </div>
        )
    }
}

//底部
export const Footer = () => (
    <ul className='footer'>
        <li>
            <NavLink to='/'>首页</NavLink>
        </li>

        <li>
            <NavLink to={{pathname:'/cart',state:{id:''}}}>购物车</NavLink>
        </li>

        <li>
            <NavLink to='myself'>我</NavLink>
        </li>
    </ul>
)
